<template>
  <videoFilterTabs v-model="tabId"></videoFilterTabs>
  <div class="home">
    <div class="video-list wrap bt">
      <div
        class="video-item up"
        v-for="(item, index) in videoList"
        @click="gotoVideoDetail(item.id)"
        key="index"
      >
        <van-image class="image" fit="cover" :src="item.cover"></van-image>
        <div class="pd1">
          <div class="c2 txt1 txtflow">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div style="height: 50px"></div>
  </div>
</template>
<script>
  import tabbar from "../../components/tabbar/index.vue";
  import { userStore } from "../../store/user.js";
  import videoFilterTabs from "./videoFilterTabs.vue";
  import {bindScroll} from '../../utils/index.js'
  import {
    computed,
    defineComponent,
    ref,
    toRefs,
    onMounted,
    reactive,
    watch,
    getCurrentInstance,
  } from "vue";
  export default defineComponent({
    components: {
      tabbar,
      videoFilterTabs,
    },
    setup(props) {
      const { proxy } = getCurrentInstance();
      const userState = userStore.state;
      const data = reactive({
        tabId: 0,
        videoList: [],
        videoPage:1,
        videoPer:6
      });
      watch(
        () => data.tabId,
        async (id) => {
          data.videoList = []
          data.videoPage = 1
          videoListReload(id)
        }
      );
      onMounted(async () => {
        bindScroll({
          onScrollBottom(){
            videoListReload();
          }
        })
        videoListReload();
      });
      const gotoVideoDetail = async (id) => {
        proxy.$router.push({
          path: "/videoList",
          query: { id },
        });
      };
      const videoListReload = async (video_category_id) => {
        const res = await proxy.$get("v1/video/list", { video_category_id,page: data.videoPage,per:data.videoPer})
        data.videoList = [...data.videoList,...res.data]
        data.videoPage = data.videoPage + 1
      };
      return {
        ...toRefs(data),
        gotoVideoDetail,
        userState,
      };
    },
  });
</script>
<style lang="less" scoped>
  .home {
    background: rgba(248, 248, 248, 1);
    min-height: calc(100vh);
    overflow: hidden;
    background-size: cover;
    position: relative;
    padding: 0px 10px;

    .txt1 {
      font-size: 0.16rem;
      line-height: 0.3rem;
    }
    .pd1 {
      padding: 0 10px;
    }
    .pd2 {
    }
  }
  .video-list {
    padding: 10px 0;
    width: 100%;
  }
  .video-item {
    width: 360px;
    margin-bottom: 20px;
  }
  .video-item .image {
    height: 360px;
  }
  .header-block {
  }
</style>
